<template>
  <div class="music">
    <audio :src="Musics" ref="audio"></audio>
    <div class="player-wrapper notChoose">
      <div class="btns" @mouseup.stop @mousemove.stop>
        <a class="pre" title="上一首歌" @click="pre"></a>
        <a
          :class="{ stop: !musicIsplay, pause: musicIsplay }"
          title="开始播放"
          @click="plays"
        ></a>
        <a class="nex" title="下一首歌" @click="nex"></a>
      </div>
      <div class="head">
        <img
          :src="songname.al.picUrl"
          v-if="songname.al"
          :title="songname.al.name"
        />
        <a class="msk"></a>
      </div>
      <div class="play">
        <div class="words">
          <a :title="songname.name" class="name underline">{{
            songname.name
          }}</a>
          <a
            class="art underline"
            v-if="song.ar"
            :title="songname.ar[0].name"
            >{{ songname.ar[0].name }}</a
          >
          <a class="src" title="来自歌手" v-if="songname.ar">{{
            songname.ar[0].name
          }}</a>
        </div>
        <div class="bar">
          <div class="barbg">
            <div class="rdy"></div>
            <div class="cur">
              <div>
                <div class="btn"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="timer">
          <span style="color: #ccc">{{ nexttimes }}:{{ nexttimem }}</span>
          <span style="color: #fff">&nbsp;/&nbsp;</span>
          <span style="color: #a1a1a1"
            >{{ min(songname) }}:{{ sec(songname) }}</span
          >
        </div>
        <!-- </div> -->
      </div>
      <div class="ctrl">
        <a class="volume" title="音量"></a>
        <a
          class="loop1"
          v-show="loop == 1"
          title="循环播放"
          @click="loop = 2"
        ></a>
        <a
          class="loop2"
          v-show="loop == 2"
          title="随机播放"
          @click="loop = 3"
        ></a>
        <a
          class="loop3"
          v-show="loop == 3"
          title="单曲循环"
          @click="loop = 1"
        ></a>
        <div class="f-pr">
          <a class="list">{{ $store.state.musicli.length }}</a>
        </div>
      </div>
      <div class="ffl">
        <a class="unlocked"></a>
      </div>
      <div class="ffr"></div>
      <div class="addsuccess" ref="addsuccess">
        <span>已添加到播放列表</span>
      </div>
    </div>
  </div>
</template>

<script>
import { reqSongUrlApi } from "@/request/api";
export default {
  name: "music",
  data() {
    return {
      // 播放暂停
      musicIsplay: false,
      // 播放器
      music: "",
      musictime: 0,
      // 定时器(监视是否需要隐藏播放器)
      timer: null,
      // 播放器进度条
      audio: "",
      // 歌曲详情
      song: {},
      timer2: null,
      loop: 1,
      Musics: "",
      // 前一个
      index: 0,
      nexttimes: "00",
      nexttimem: "00",
      songname: {},
    };
  },
  methods: {
    // 播放音乐
    plays() {
      clearInterval(this.timer);
      clearInterval(this.timer2);
      if (this.$store.state.musicId != 0 && !this.musicIsplay) {
        this.musicIsplay = !this.musicIsplay;
        reqSongUrlApi(this.$store.state.musicId).then((res) => {
          this.song = res.data.data[0];
          this.Musics = res.data.data[0].url;
          this.audio = this.$refs.audio;
          this.$nextTick(function () {
            this.audio.play();
          });
        });
        return;
      }
      if (this.musicIsplay) {
        this.audio.pause();
        this.musicIsplay = !this.musicIsplay;
      }
    },
    min(song) {
      if (song.dt == undefined) {
        return "00";
      }
      if (parseInt(song.dt / 60000) < 10)
        return "0" + parseInt(song.dt / 60000);
      else return parseInt(song.dt / 60000);
    },
    sec(song) {
      if (song.dt == undefined) {
        return "00";
      }
      let x = parseInt(song.dt / 60000);
      let y = parseInt(song.dt / 1000 - x * 60);
      if (y < 10) return "0" + y;
      else return y;
    },
    pre() {
      if (this.index === 0) {
        return;
      }
      this.index--;
      this.$store.commit(
        "changeMusicId",
        this.$store.state.musicli[this.index]
      );
    },
    nex() {
      clearInterval(this.timer);
      clearInterval(this.timer2);
      if (this.index >= this.$store.state.musicli.length - 1) {
        let index = this.$store.state.musicindex + 1;
        if (index == this.$store.state.songlist.length) {
          index = 0;
        }
        let id = this.$store.state.songlist[index].id;
        this.$store.commit("pushMusicLi", { id, index });
        this.$store.commit(
          "changeMusicId",
          this.$store.state.musicli[this.$store.state.musicli.length - 1]
        );

        return;
      }
      this.index++;
      this.$store.commit(
        "changeMusicId",
        this.$store.state.musicli[this.index]
      );
    },
  },
  computed: {
    musicid() {
      return this.$store.state.musicId;
    },
    musicli() {
      return this.$store.state.musicli;
    },
  },
  watch: {
    musicid() {
      clearInterval(this.timer);
      clearInterval(this.timer2);
      this.nexttimes = "00";
      this.nexttimem = "00";
      if (this.$store.state.musicId != "") {
        this.musicIsplay = true;
        this.songname = this.$store.state.songlist[this.index];
        reqSongUrlApi(this.$store.state.musicId).then((res) => {
          this.song = res.data.data[0];
          this.Musics = res.data.data[0].url;
          this.audio = this.$refs.audio;
          this.musictime =
            this.$store.state.songlist[this.$store.state.musicindex].dt;
          this.$nextTick(function () {
            this.audio.play();
            this.audio.currentTime = 0;
            var s = 0,
              m = 0;
            this.timer2 = setInterval(() => {
              s++;
              this.nexttimes = s < 10 ? "0" + s : s;
              if (this.nexttimes == 59) {
                s = 0;
                m++;
                this.nexttimem = m < 10 ? "0" + m : m;
              }
            }, 1000);
            this.timer = setInterval(() => {
              this.nex();
            }, this.musictime);
          });
        });
      }
    },
    musicli() {
      this.index = this.$store.state.musicli.length - 1;
      this.songname = this.$store.state.songlist[this.index];
    },
  },
};
</script>

<style lang="less" scoped>
.music {
  width: 100%;
  height: 53px;
  position: fixed;
  bottom: 0px;
  z-index: 999;
  transition: 0.5s all;
  // background-color: red;
  background: url("@/assets/image/toplist/playbar.png");
  background-position: 0 0;
  background-repeat: repeat-x;
  // overflow: hidden;
  .player-wrapper {
    width: 980px;
    height: 53px;
    margin: 5px auto;
    .btns {
      float: left;
      width: 137px;
      padding: 6px 0 0 0;
      a {
        display: block;
        float: left;
        width: 28px;
        height: 28px;
        margin-right: 8px;
        margin-top: 5px;
        text-indent: -9999px;
        background: url("@/assets/image/toplist/playbar.png") no-repeat;
      }
      .pre {
        background-position: 0 -130px;
        &:hover {
          background-position: -30px -130px;
          cursor: pointer;
        }
      }
      .pause,
      .stop {
        width: 36px;
        height: 36px;
        margin-top: 0;
      }
      .pause {
        background-position: 0 -165px;
        &:hover {
          background-position: -40px -165px;
          cursor: pointer;
        }
      }
      .stop {
        background-position: 0px -204px;
        &:hover {
          background-position: -40px -204px;
          cursor: pointer;
        }
      }
      .nex {
        background-position: -80px -130px;
        &:hover {
          background-position: -110px -130px;
          cursor: pointer;
        }
      }
    }
    .head {
      margin: 7px 15px 0 0;
      float: left;
      width: 34px;
      height: 34px;
      position: relative;
      img {
        width: 34px;
        height: 34px;
      }
      .msk {
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        width: 34px;
        height: 35px;
        background: url("@/assets/image/toplist/playbar.png") no-repeat;
        background-position: 0 -80px;
        cursor: pointer;
      }
    }
    .play {
      width: 581px;
      height: 47px;
      position: relative;
      float: left;
      .words {
        width: 581px;
        height: 28px;
        overflow: hidden;
        color: #e8e8e8;
        text-shadow: 0 1px 0 #171717;
        line-height: 28px;
        .name {
          float: left;
          color: #fff;
          margin-right: 15px;
        }
        .art {
          float: left;
          color: #989898;
        }
        .src {
          float: left;
          color: #fff;
          height: 15px;
          cursor: pointer;
        }
      }
      .bar {
        width: 581px;
        height: 9px;
        position: relative;

        .barbg {
          width: 466px;
          height: 9px;
          float: left;
          background: url("@/assets/image/toplist/statbar.png") no-repeat 0 0px;
          position: relative;
          .rdy {
            width: 466px;
            height: 9px;
            position: absolute;
            background: url("@/assets/image/toplist/statbar.png") no-repeat
              right -30px;
          }
          .cur {
            height: 9px;
            position: absolute;
            background: url("@/assets/image/toplist/statbar.png") no-repeat 0 -66px;
            .btn {
              position: absolute;
              top: -4px;
              right: -8px;
              width: 7px;
              height: 7px;
              background-color: #f00;
              border-radius: 50%;
              box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
              border: 4.5px solid #fff;
              &:active {
                cursor: pointer;
              }
              &:hover {
                cursor: pointer;
                box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
              }
            }
          }
        }
      }
    }
    .ctrl {
      margin-left: 15px;
      position: relative;
      z-index: 10;
      width: 126px;
      padding-left: 13px;
      height: 36px;
      background-position: -147px -238px;
      float: left;
      > a {
        width: 25px;
        height: 25px;
        margin: 13px 2px 0 0;
        display: block;
        position: relative;
        float: left;
        background: url("@/assets/image/toplist/playbar.png") no-repeat;
        &:hover {
          cursor: pointer;
        }
      }
      .volumeBox {
        position: absolute;
        top: -113px;
        left: 9px;
        clear: both;
        width: 32px;
        height: 113px;
        .barbg {
          position: absolute;
          top: 0;
          left: 0;
          width: 32px;
          height: 113px;
          background: url("@/assets/image/toplist/playbar.png") no-repeat;
          background-position: 0 -503px;
        }
        .vbg {
          padding: 4px 0;
          top: 7px;
          position: absolute;
          left: 14px;
          width: 4px;
          height: 101px;

          .cur {
            position: absolute;
            width: 4px;
            top: auto;
            bottom: 4px;
            left: 0;
            background: url("@/assets/image/toplist/playbar.png") no-repeat;
            background-position: -40px bottom;
            overflow: hidden;
          }
          .jt {
            position: absolute;
            top: auto;
            left: -7px;
            display: block;
            width: 18px;
            height: 20px;
            background: url("@/assets/image/toplist/iconall.png") no-repeat;
            background-position: -40px -250px;
            cursor: pointer;
            &:hover {
              background-position: -40px -280px;
            }
          }
        }
      }
      .volume {
        background-position: -2px -248px;
        &:hover {
          background-position: -31px -248px;
          cursor: pointer;
        }
      }
      .loop1 {
        background-position: -3px -344px;
        &:hover {
          background-position: -33px -344px;
        }
      }
      .loop2 {
        background-position: -66px -248px;
        &:hover {
          background-position: -93px -248px;
        }
      }
      .loop3 {
        background-position: -66px -344px;
        &:hover {
          background-position: -93px -344px;
        }
      }
      .f-pr {
        float: left;
        width: 59px;
        height: 36px;
        .list {
          display: block;
          height: 25px;
          margin: 11px 2px 0 0;
          float: none;
          padding-left: 21px;
          background: url("@/assets/image/toplist/playbar.png") no-repeat;
          background-position: -42px -68px;
          line-height: 27px;
          text-align: center;
          color: #666;
          text-shadow: 0 1px 0 #080707;
          text-indent: 0;
          text-decoration: none;
          &:hover {
            background-position: -42px -98px;
            cursor: pointer;
          }
        }
      }
    }

    .ffr {
      position: absolute;
      top: -1px;
      right: 0;
      width: 15px;
      height: 54px;
      background-position: -52px -393px;
      pointer-events: none;
    }
    .addsuccess {
      width: 200px;
      height: 50px;
      position: absolute;
      text-align: center;
      line-height: 50px;
      top: -48px;
      right: 280px;
      background: #232526;
      background: -webkit-linear-gradient(to right, #414345, #232526);
      background: linear-gradient(to right, #414345, #232526);
      color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
      opacity: 0;
      transition: 0.5s all;
      display: none;
    }
  }
}
.timer {
  position: absolute;
  color: #797979;
  font-size: 12px;
  right: 0;
  top: 27px;

  .alltime {
    color: #e8e8e8 !important;
  }
}
</style>